<template>
	<view class="order-page" v-if="orderDetail">
		<view v-if="orderDetail.status===2" class="orderStatus c-flex jc-center">
			<view class="c-flex c-item-center">
				<image :src="orderImgUrl+'sendTime.png'" style="width: 32rpx;height: 50rpx;"></image>
				<text style="font-weight: 400;font-size: 30rpx;">期望送达时间</text>
			</view>
			
		</view>
		<view v-if="orderDetail.status===2" class="time">{{orderDetail.appointTime}}</view>
		<view v-if="orderDetail.status==4" class="orderStatus c-flex jc-center">
			<view v-if="orderDetail.failCount==0" class="c-flex c-item-center">
				<image :src="orderImgUrl+'checkNormal.png'"></image>
				<text>安检合格</text>
			</view>
			<view v-if="orderDetail.failCount>0" class="c-flex c-item-center">
				<image :src="orderImgUrl+'checkWarn.png'"></image>
				<text>安检异常</text>
			</view>
		</view>
		<view v-if="orderDetail.status===3" class="orderStatus c-flex jc-center">
			<view class="c-flex c-item-center">
				<image :src="orderImgUrl+'sendFull.png'" style="width: 96rpx;height: 70rpx;"></image>
				<text>气瓶已送达</text>
			</view>

		</view>
		<view class="userInfo">
			<view class="c-info c-flex jc-between">
				<view class="p-1">
					<view>{{orderDetail.lpgUserAddress}}</view>
					<view style="margin-top: 20rpx;"> {{orderDetail.lpgUserName}} {{maskPhoneNumber(orderDetail.lpgUserPhone)}}</view>
				</view>
				<!-- <view class="p-2">
					<image :src="orderImgUrl+'daohang.png'"></image>
					<view>导航</view>
				</view> -->
			</view>
		</view>
		<view class="p-list">
			<view class="p-l-item">
				<view class="title-con c-flex jc-between c-item-center">
					<view class="c-flex jc-start c-item-center">
						<view class="d_icon"></view>
						<view class="title-1"><text>商品信息</text></view>
					</view>
				</view>
				<view class="p-content">
					<view class="p-c-item c-flex jc-between" v-for="(item,i) in orderDetail.items" :key="i">
						<view class="goodInfo c-flex">
							<view class="goodImg c-flex c-item-center jc-center">
								<image  :src="item.pic"></image>
							</view>
							<view class="standards">
								<view>{{item.name}}</view>
								<view>x{{item.saleCount}}</view>
							</view>
						</view>

						<view class="price ">
							￥{{item.saleAmount}}
						</view>
					</view>
				</view>
				
				
				<view class="p-price  c-flex jc-between">
					<view>商品总金额</view>
					<view>￥{{orderDetail.totalAmount}}</view>
				</view>
				<view class="p-price  c-flex jc-between">
					<view>配送费</view>
					<view>￥{{orderDetail.freightAmount}}</view>
				</view>
				<view class="p-price  c-flex jc-between">
					<view>实付金额</view>
					<view>￥{{orderDetail.payAmount}}</view>
				</view>

			</view>
		</view>
		<view class="p-list">
				<view class="p-l-item">
					 <view class="title-con c-flex jc-between c-item-center">
						
						<view class="c-flex jc-start c-item-center">
							<view  class="d_icon" ></view>
							<view class="title-1"><text>订单信息</text></view>
						</view>
						<view class="c-pos-r">
							<!-- <image class="status" :src="orderImgUrl+'zhipai.png'"></image> -->
						</view>
						
					</view>	 
						<view class="p-content">
							<view class="p-c-item c-flex jc-between" >
								<text>订单编号：</text> <text>{{orderDetail.orderSn || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between" >
								<text>期望送达：</text> <text>{{orderDetail.appointTime || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between" >
								<text>配送骑手：</text> <text>{{orderDetail.staffName || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between" >
								<text>配送车辆：</text> <text>{{orderDetail.licensePlate || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between" >
								<text>下单时间：</text> <text>{{orderDetail.createTime || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between"  v-if="orderDetail.status===3 || orderDetail.status===4">
								<text>送达时间：</text> <text>{{orderDetail.arrivalTime || '--'}}</text>
							</view>
							<view class="p-c-item c-flex jc-between">
								<text>订单备注：</text> <text>{{orderDetail.note || '--'}}</text>
							</view>
						</view>
				</view>
			</view>	
			<view class="p-list" v-if="orderDetail.status==4">
				<view class="p-l-item">
					 <view class="title-con c-flex jc-between c-item-center">
						<view class="c-flex jc-start c-item-center">
							<view  class="d_icon" ></view>
							<view class="title-1"><text>安检信息</text></view>
						</view>
					</view>	 
					<view class="p-content" @tap="checkRecord()">
						<view class="p-c-item c-flex jc-between">
							<text>安检时间：</text> <text>{{orderDetail.patrolTime || '--'}}</text>
						</view>
						<view class="p-c-item c-flex jc-between">
							<text>安检记录：</text> <text>点击查看安检记录 →</text>
						</view>
					</view>	
				</view>	
			</view>	
			<view class="p-btn c-flex jc-end" v-if="orderDetail.status===2">
				<view class="contactBtn" @tap="callPhone(orderDetail.lpgUserPhone)">联系顾客</view>
				<view class="sureBtn" v-if="!orderDetail.canPatrol  && orderDetail.bottleCount>0" @tap.stop='surehandler(orderDetail)'>扫码确认</view>
				<view class="sureBtn" v-if="!orderDetail.canPatrol  && orderDetail.bottleCount==0" @tap.stop='surehandler(orderDetail)'>送达确认</view>
			</view>
			<view class="p-btn c-flex jc-between" v-if="orderDetail.status==3 && !orderDetail.canPatrol">
				<view class="goCheckBtn" @tap="deviceCheck()">去安检</view>
				
			</view>
			<view class="p-btn c-flex jc-between" v-if="orderDetail.status==1">
				<view class="goCheckBtn" @tap="task()">接单</view>
				
			</view>
	</view>
</template>

<script>
	import {maskPhoneNumber} from '@/utils/utils.js'
	import {OREDR_STATUS} from '@/utils/global.js';
	import {mapStatus,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				maskPhoneNumber:maskPhoneNumber,
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				commonUrl: this.$API.IMG_URL + '/common/',
				checkStatus: null,
				orderStatus: null,
				orderDetail:null,
				goodsList: []
			};
		},
		onLoad(options) {
			
			this.orderDetail = JSON.parse(options.orderItem)
			console.log(this.orderDetail )
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor: '#000000'
			});
		},
		methods: {
			...mapMutations(['setOrderStatus','setPageBackDelta']),
			surehandler(item){
				if(item.bottleCount>0){
					uni.navigateTo({
						url:'./scanList?id='+item.id+'&bottleCount='+item.bottleCount +'&delta=0'
					})
				}else{
					this.$API.liquefiedGasOrderArrive({id:item.id}).then(res =>{
							if(res.code===0){
								this.setOrderStatus(OREDR_STATUS[2]);
								uni.navigateBack()
							}
					}).catch(()=>{
						
					});
					
				}
				
				
			},
			callPhone(phoneNumber) {
			      uni.makePhoneCall({
			        phoneNumber: phoneNumber, // 电话号码
			        success: function () {
			          console.log('拨打电话成功');
			        },
			        fail: function (err) {
			          console.log('拨打电话失败：', err);
			        }
			      });
			},
			checkRecord(){
				let picArr = this.orderDetail.attachments && this.orderDetail.attachments.split(',') || [];
				uni.navigateTo({
					url:'/pages/delivery/room-check/room-check-detail?item='+JSON.stringify(this.orderDetail)+'&picArr='+JSON.stringify(picArr)+'&type=order'
				})
			},
			deviceCheck(){
				this.setPageBackDelta(3);
				uni.navigateTo({
					url:'/pages/delivery/room-check/room-check?item='+JSON.stringify(this.orderDetail)+'&type=order'
				})
			},
			task(item){
				this.$API.liquefiedGasTask({id:this.orderDetail.id}).then(res =>{
					if(res.code ===0){
						
						this.setOrderStatus(OREDR_STATUS[1]);
						uni.navigateBack()
					}
				}).catch(()=>{
					
				});
			},
			


		}
	}
</script>
<style>
	.uni-button-color {
		color:#E86748 !important;
	}
	
</style>
<style lang="scss" scoped>
	.order-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);
		height: 100%;
		.time{
			text-align: center;font-family: PingFang-SC, PingFang-SC;font-weight: bold;font-size: 40rpx;color: #333333;padding-top: 20rpx;letter-spacing:3rpx;
		}
		.orderStatus {
			padding-top: 52rpx;

			image {
				width: 86rpx;
				height: 86rpx;
			}

			text {
				font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 36rpx;color: #000000;padding-left: 22rpx;
			}
		}

		.userInfo {
			margin: 0rpx 18rpx 0;
			position: relative;
			top:40rpx;
			.c-info {
				background: #FFFFFF;border-radius: 18rpx;padding: 22rpx 28rpx 35rpx;margin-bottom: 20rpx;position: relative;
				.p-1 {
					width: 85%;font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 30rpx;color: #333333;
				}

				.p-2 {
					margin-right: 10rpx;
					text-align: center;

					image {
						width: 56rpx;
						height: 56rpx;
					}

					view {
						font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 22rpx;color: #000C31;

					}
				}
			}

		}

		.p-list {
			margin: 20rpx 18rpx 0;

			.p-l-item {
				background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 15rpx;margin-bottom: 20rpx;position: relative;
				.title-con {
					.d_icon {
						margin-right: 10rpx;width: 14rpx;height: 32rpx;background: linear-gradient(180deg, #F18858 0%, #E86547 100%);transform: skewX(-12deg)
					}

					image {
						width: 32rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}

					border-bottom: 2rpx solid #F7F7F7;
					padding-bottom: 12rpx;


					.status {
						width: 86rpx;
						height: 56rpx;
					}

					.status-txt {
						position: absolute;
						left: 9rpx;
						top: 4rpx;
						font-size: 20rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.title-1 {
						font-size: 30rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #333333;margin-bottom: 0rpx;

						text {
							margin-left: 10rpx;font-family: PingFang-SC, PingFang-SC;font-weight: 400;font-size: 30rpx;color: #333333;
						}
					}

				}

				.p-content {
					margin: 25rpx 0 0;

					.p-c-item {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;

						.goodInfo {
							width: 80%;

							.goodImg {
								width: 98rpx;
								height: 94rpx;
								background: #F5F5F5;
								border-radius: 14rpx;

								image {
									width:100%;
									height:100%;
								}
							}

							.standards {
								margin-left: 18rpx;

								view:nth-child(1) {
									font-family: PingFang-SC, PingFang-SC;
									font-weight: 500;
									font-size: 28rpx;
									color: #333333;
									margin-top: 10rpx;
								}

								view:nth-child(2) {
									font-family: PingFang-SC, PingFang-SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #333333;
									margin-top: 10rpx;
								}
							}
						}

						margin-bottom: 24rpx;
						text{
							font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 28rpx;color: #333333;
						}
						

						
					}

					
				}

				.p-price {
					margin-bottom:24rpx;
					view {
						font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 28rpx;color: #000000;
					}
				}
			}
		}
		.p-btn {
			gap: 26rpx; margin-top: 35rpx;	font-family: PingFang-SC, PingFang-SC;font-weight: 500;font-size: 28rpx;text-align: center; padding: 0 22rpx; 
			.contactBtn{
				line-height: 80rpx;color: #E86748;width: 344rpx;height: 80rpx;border-radius: 16rpx;border: 2rpx solid #E96949;
			}
			.sureBtn{
				border: 2rpx solid transparent;line-height: 80rpx;width: 344rpx;height: 80rpx;line-height: 80rpx;background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);border-radius: 16rpx;color: #FFFFFF;
			}
			.checkBtn {
				margin: 0 auto;width: 710rpx;height: 80rpx;border-radius: 16rpx;border: 2rpx solid #E96949;color: #E86748;line-height: 80rpx;
			}
		
			.goCheckBtn {
				margin: 0 auto;width: 710rpx;height: 80rpx;background: linear-gradient(180deg, #F18858 0%, #E86547 100%);border-radius: 16rpx;color: #FFFFFF;line-height: 80rpx;
			}
		}

	}
</style>